<template>
	<view>
		<view style="height: 35px;"></view>
		<!-- 搜索框 -->
		<view class="">
			<uni-search-bar radius="10" />
		</view>
		<!-- 轮播图 -->
		<view class="">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change" autoplay interval="2000">
				    <swiper-item v-for="(item, index) in info" :key="index" class="swItemBanner">
						<image :src="item.url" mode="" class="imgBanner"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- 头部导航 -->
		<view class="viewCommunity">
			<view v-for="(item, index) in community" :key="index" class="viewCom">
				<image :src="item.url" mode="aspectFit"></image>
				<text>{{ item.content }}</text>
			</view>
		</view>
		<view class="viewLine">
		</view>
		<!-- 动态 -->
		<view class="">
			<view class="dynamic" v-for="(item, index) in dynamic" :key="index">
				<view class="dynamicHead">
					<image :src="item.headImg" mode="aspectFit"></image>
					<text>{{ item.userName }}</text>
				</view>
				<view class="dynamicSpe">
					<view class="dynWords">
						<view v-if="showText">
							{{ item.content.words }}
							<text v-if="item.content.words !== null && item.content.words.length > 64" class="full_text" @click="toggleDescription">收起</text>
						</view>
						<view v-else>
							{{ item.content.words.slice(0, 10) }}
							<text v-if="item.content.words !== null && item.content.words.length > 64" class="full_text" @click="toggleDescription">全文</text>
						</view>
					</view>
					<text></text>
					<view class="dynamicImg">
						<image :src="images" mode="aspectFill" v-for="(images, index) in item.content.conImg" :key="index"></image>
					</view>
				</view>
				<!-- 分享、评论、点赞 -->
				<view class="line">
				</view>
				<view class="comShare">
					<view class="" @click="share">
						<uni-icons type="redo" size="20"></uni-icons>
						<text>{{ item.comNum.share }}</text>
					</view>
					<view class="">
						<uni-icons type="compose" size="20"></uni-icons>
						<text>{{ item.comNum.comment }}</text>
					</view>
					<view class="" @click="changState(index)">
						<uni-icons :type="item.comNum.agree.dzState == true ? 'heart-filled' :'heart'" size="20" :color="item.comNum.agree.dzState == true ? '#ff0000' : '#333333'"></uni-icons>
						<text>{{ item.comNum.agree.num }}</text>
					</view>
				</view>
				<view class="viewLine">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from "@/components/uni-search-bar/uni-search-bar.vue";
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
	// 图标
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	// Vuex
	import {mapState, mapMutations} from "vuex";
	export default {
		components:{
			// 搜索框
			uniSearchBar,
			// 轮播图
			uniSwiperDot,
			// 图标
			uniIcons,
		},
		computed: {
			...mapState({
				// 轮播图
				info:"homeBanner",
			})
		},
		data() {
			return {
				community: [
					{
						id: "1",
						content: "话题",
						url: "../../static/images/community/one.png",
						path: ""
					},{
						id: "2",
						content: "文章",
						url: "../../static/images/community/three.png",
						path: ""
					},{
						id: "3",
						content: "热门",
						url: "../../static/images/community/two.png",
						path: ""
					},{
						id: "4",
						content: "星宠",
						url: "../../static/images/community/four.png",
						path: ""
					},
				],
				dynamic: [
					{
						id: 1,
						userName: "宠物家",
						headImg: "http://b316.photo.store.qq.com/psb?/V11daM2e4KXLfM/KAObR8YmwY6luipoiPSEiUtXK8pBleGUwBGzXAGZ0qE!/b/dDwBAAAAAAAA&bo=yADIAAAAAAADFzI!&rf=viewer_4",
						time: "",
						content: {
							words: "今天在街上碰到了一只超级可爱的柴犬！！！真的很可爱！！！",
							conImg: [
								"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3664169241,1898119396&fm=26&gp=0.jpg",
							]
						},
						comNum: {
							share: 135,
							comment: 353,
							agree: {
								dzState: false,
								num: 126
							}
						}
					},{
						id: 2,
						userName: "甜甜圈",
						headImg: "../../static/images/community/two.png",
						time: "",
						content: {
							words: "快来看看我家的甜甜圈",
							conImg: ["https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2507094551,2966102658&fm=26&gp=0.jpg"]
						},
						comNum: {
							share: 153,
							comment: 754,
							agree: {
								dzState: false,
								num: 3468
							}
						}
					},{
						id: 3,
						userName: "喵星人",
						headImg: "../../static/images/community/two.png",
						time: "",
						content: {
							words: "金毛真是世界上最可爱的狗狗！！！",
							conImg: [
								"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1399577874,1642661058&fm=26&gp=0.jpg",
								"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603456685829&di=e5c9dbb7965c5db5e91ab99adea647dd&imgtype=0&src=http%3A%2F%2Fdpic.tiankong.com%2Fmi%2Fej%2FQJ6376319307.jpg%3Fx-oss-process%3Dstyle%2Fshow",
								"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603456725716&di=8eb95039b7ba62b5dcf9789fb417c19c&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1704%2F07%2Fc16%2F42074570_1491537201718.jpg"
							]
						},
						comNum: {
							share: 116,
							comment: 210,
							agree: {
								dzState: false,
								num: 43
							}
						}
					}
				],
				current: 0,
				mode: 'round',
				showText: true
			}
		},
		onLoad() {
			this.getHomeBanner();
			console.log(this.dynamic[0].content.words.length)
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			getHomeBanner() {
				this.$store.commit("getHomeBanner");
				console.log(this.info == this.$store.state.homeBanner)
			},
			changState(index) {
				this.dynamic[index].comNum.agree.dzState = !this.dynamic[index].comNum.agree.dzState;
				if(this.dynamic[index].comNum.agree.dzState == true) {
					this.dynamic[index].comNum.agree.num += 1;
				} else {
					this.dynamic[index].comNum.agree.num -= 1;
				}
			},
			toggleDescription (num) {
			    this.showText = !this.showText
			},
			share() {
				uni.share({
					provider: "qq",
					// scene: "WXSceneSession",
					type: 0,
					summary: "我发现了有趣的东西，快来看一看吧",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						uni.showToast({
							title: "分享成功"
						});
						console.log("fail:" + JSON.stringify(err));
					}
				})
			}
		}
	}
</script>

<style>
body {
	font-size: 32rpx;
}
uni-swiper {
	height: 300rpx;
}
.swItemBanner > image {
	width: 718rpx;
	height: 300rpx;
}
.uni-swiper__warp {
	margin: 0 16rpx;
}
.viewCommunity {
	margin: 16rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.viewCommunity > view {
	width: 15%;
	/* height: 30%; */
	text-align: center;
}
.viewCommunity uni-image {
	width: 100rpx;
	height: 100rpx;
}
.viewCom {
	width: 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.viewCom > text {
	font-size: 24rpx;
	margin-top: 10rpx;
	margin-bottom: 10rpx;
}
.viewLine {
	width: 100%;
	height: 20rpx;
	background-color: #e8e8e8;
}
.dynamic > view:not(:last-child) {
	margin-left: 16rpx;
	margin-right: 16rpx;
}
.dynamicHead {
	margin-top: 16rpx;
	display: flex;
}
.dynamicHead text {
	align-self: center;
	padding-left: 16rpx;
	color: #fed501;
}
.dynamicHead uni-image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 9999px;
}
.dynWords {
	display: block;
	margin-top: 16rpx;
	margin-bottom: 16rpx;
	max-height: 65px;
	overflow: hidden;
	word-break: break-all;  /* break-all(允许在单词内换行。) */
	text-overflow: ellipsis; /* 超出部分省略号 */
	display: -webkit-box;  /** 对象作为伸缩盒子模型显示 **/
	-webit-box-orient: vertical;  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
	-webkit-line-clamp: 2; /** 显示的行数 **/
}
.dynamicImg {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.dynamicImg uni-image {
	height: 200rpx;
	width: 31%;
	margin-bottom: 16rpx;
	margin-right: 16rpx;
}
.line {
	/* width: 100%; */
	height: 2rpx;
	background-color: #e8e8e8;
}
.comShare {
	display: flex;
	justify-content: space-between;
	text-align: center;
	margin-top: 16rpx;
}
.comShare > view {
	width: 33%;
	display: flex;
	flex-flow: column wrap;
}
.comShare uni-image {
	width: 40rpx;
	height: 40rpx;
}
</style>
